<template>
    <div class="messageItem">
        <slot class="top" name="top"></slot>

        <div class="item">
            <slot name="img"></slot>

            <div class="content">
                <slot></slot>
            </div>
             

        </div>
    </div>
</template>

<script>
export default {
    name:'messageItem'
}
</script>

<style scoped>
.messageItem{
    padding: 20px;
}
.messageItem .top{
    font-size: 20px;
    color: rgb(228, 48, 93);
    font-weight: bold;
}
.messageItem .item{
    display: flex;
    border-bottom: 1px dashed #e5e5e5;
    flex-flow: wrap;
}
.messageItem .item .img{
    width: 10%;
}
.messageItem .item .img img{
    border-radius: 20px;
}
.messageItem .item .content{
    width:80%;
    padding: 10px;
    border: 1px solid #dee4e9;
    margin-bottom: 10px;
}
.messageItem .item .content .c-item{
    border-bottom: 1px solid #837d7d;
}
.messageItem .item .content .c-item .time p{
    margin: 0;
}
.messageItem .item .content .c-item .time p:nth-child(1){
    display: inline-block;
    width: 50%;
    font-weight: bold;
}

.messageItem .item .content .c-item .time p:nth-child(2){
    display: inline-block;
    width: 50%;
    text-align: right;
}
.messageItem .item .content .c-item .text p{
    text-indent: 2em;
    font-size: 14px;
}
.messageItem .item  .m-btn p{
    text-align: left;
}
.messageItem .item .m-btn p a{
    color: #f70606;
    font-weight: bold;
}

</style>